"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import qs from 'query-string';

import useDebounce from "@/hooks/useDebounce";
import Input from "./Input";

/**
 * 该组件是搜索框组件，获取搜索框的文本内容，
 * 并进行url字符串化，最终跳转至字符串化后的地址。
 */
const SearchInput = () => {
  const router = useRouter();
  const [ value, setValue ] = useState<string>(''); 
  const debouncedValue = useDebounce<string>(value, 500);

  useEffect(() => {
    const query = { title: debouncedValue };
    const url = qs.stringifyUrl({
      url: '/search',
      query: query
    });

    // console.log(url);
    ///search?title=all%20of%20me
    
    router.push(url);
  }, [debouncedValue, router]);

  return (
    <Input
      placeholder="您想听些什么歌曲?"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

export default SearchInput;